<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        main{
            width: 400px;
            height: 120px;
           border: #008CFF 1px solid;
            margin: 30px 300px;
            position: relative;
            overflow: hidden;
        }
        #left{
            width: 100px;
            height: 100%;
            color: #333333;
            position: relative;
        }
        #centor{
            width: 200px;
            height: 100px;
            position: absolute;
            left: 100px;
            top: 0px;

        }
        #right{
            width: 100px;
            height: 100%;
            position: absolute;
            left: 300px;
            top: 0px;
        }
        #left>li,#right>li{
            width: 100px;
            line-height: 30px;
            padding: 3.3px 0px;
            border: #333333 1px solid;
            list-style: none;
        }
        #centor>li{
            width: 200px;
            line-height: 100px;
            list-style: none;
            border: #333333 1px solid;
        }
    </style>
    <title></title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
           //需求1：给左边的li标签设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏隐藏
            //需求2：给右边的li标签设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏隐藏

            //需求1：
          $('#left>li').mouseenter(function (){
              //获取当前鼠标移入的这个li标签的索引
              let nub=$(this).index();
             $('#centor>li').eq(nub).show().siblings('li').hide();//索引：表示的是这个元素在他兄弟元素间的排序
              //让中间索引对应的li显示，其他的li隐藏
              // $('#centor>li:eq('+idx+')');//字符串的拼接
          });

          $('#right>li').mouseenter(function (){
             let inx=$(this).index()+3;
             $('#centor>li').eq(inx).show().siblings('li').hide();
          });
        });
    </script>
</head>
<body>
  <main>
      <ul id="left">
          <li>书籍</li>
          <li>手机</li>
          <li>玩具</li>
      </ul>
      <ul id="centor">
          <li>书籍.jpg</li>
          <li>手机.jpg</li>
          <li>玩家.jpg</li>
          <li>家电.jpg</li>
          <li>衣服.jpg</li>
          <li>水果.jpg</li>
      </ul>
      <ul id="right">
          <li>家电</li>
          <li>衣服</li>
          <li>水果</li>
      </ul>
  </main>
</body>
</html>